import React, { FC } from 'react'
import {inject,observer} from 'mobx-react'
import Mytitle from '../../../../components/Mytitle'
import { Button, Form, Input, message } from 'antd'
import { UserOutlined, LockOutlined,PhoneOutlined } from '@ant-design/icons';
import {Link,useNavigate} from 'react-router-dom'
import { reg } from '../../../../utils/validate';
import { ajax } from '../../../../api';
import './index.scss'
const Add:FC<any>=({
  uinfo
})=> {
  return (
    <div style={{width:"100%",height:"400px",position:"relative"}}>
        <Mytitle text="添加用户"></Mytitle>
        <div className="login_main">
          <h1>添加用户</h1>
          <div className="login_cont">
          <Demo></Demo>
          </div>
            
      </div>

    </div>
  )
}


const Demo = () => {
  const navigate =  useNavigate()
  const onFinish = async (values: any) => {
    if(values.password==values.dbpassword){
      values.role=1
      let res=await ajax.register(values)
      console.log(res);
      if(res.code==200){
        setTimeout(()=>{
          navigate('/home/mine/user/list')
        },1000)
      }
    }else{
      message.error('两次输入密码不同');
    }
    
    console.log(values);
    
  };

  const onFinishFailed = (errorInfo: any) => {
    message.error('请输入正确的表单信息');
  };

  return (
    <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="用户名"
        name="username"
        rules={[{ required: true, message: '用户名不能为空' }]}
      >
        <Input 
         prefix={<UserOutlined className="site-form-item-icon" />}
         placeholder="请输入用户名"
         allowClear
        />
      </Form.Item>
      <Form.Item
        label="电话号码"
        name="phone"
        rules={[{ required: true, message: '手机号不能为空' },{pattern:reg.phone,message:"请输入正确的手机号格式"}]}
      >
        <Input 
         prefix={<PhoneOutlined className="site-form-item-icon" />}
         placeholder="请输入电话号码"
         allowClear
        />
      </Form.Item>

      <Form.Item
        label="密码"
        name="password"
        rules={[{ required: true, message: '密码不能为空' },{ pattern: reg.pwd, message: '密码为6到16位的字母和数字组合' }]}
      >
        <Input.Password 
         prefix={<LockOutlined className="site-form-item-icon" />}
         placeholder="请输入密码"
         allowClear
        />
      </Form.Item>
      <Form.Item
        label="确认密码"
        name="dbpassword"
        rules={[{ required: true, message: '确认密码不能为空' },{ pattern: reg.pwd, message: '密码为6到16位的字母和数字组合' }]}
      >
        
        <Input.Password 
         prefix={<LockOutlined className="site-form-item-icon" />}
         placeholder="请输入确认密码"
         allowClear
        />
      </Form.Item>
      <Form.Item wrapperCol={{ offset: 8, span: 16 }} >
        <Button type="primary" htmlType="submit" block style={{width:"100%"}}>
          添加用户
        </Button>
      </Form.Item>
    </Form>
  );
};

export default inject('uinfo')(observer(Add))